<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html { background: #242424; }
        html, body, ul, li { margin: 0; padding: 0; }
        li { list-style-type: none; }
        img { display: block; max-width: 100%; max-height: 100%; }
        #parent { width: 100%; height: 294px; overflow: hidden; position: relative; background: #fff; }
        #children_box { width: 9000px; overflow: hidden; position: absolute; left: 0px; top: 0; }
        #children1, #children2 { float: left; }
        #children_box ul li { float: left; height: 294px; margin-right: 2px; }
        #children_box ul li img { width: auto; height: 100%; }
    </style>
</head>

<body>
<div id="parent">
    <div id="children_box">
        <ul id="children1">
            <li><img src="images/img1.jpg" /></li>
            <li><img src="images/img2.jpg" /></li>
            <li><img src="images/img3.jpg" /></li>
            <li><img src="images/img4.jpg" /></li>
            <li><img src="images/img5.jpg" /></li>
            <li><img src="images/img6.jpg" /></li>
            <li><img src="images/img7.jpg" /></li>
        </ul>
        <ul id="children2"></ul>
    </div>
</div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    (function () {
        var speed  = 5;
        var parent = document.getElementById('parent');
        var child1 = document.getElementById('children1');
        var child2 = document.getElementById('children2');

        child2.innerHTML = child1.innerHTML;
        function Marquee() {
            if (child1.offsetWidth - parent.scrollLeft <= 0) {
                parent.scrollLeft = 0;
            } else {
                parent.scrollLeft++;
            }
        }
        var MyMar = setInterval(Marquee, speed);
        parent.onmouseover = function () { clearInterval(MyMar) };
        parent.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    }());
    </script>
</body>

</html>
